<!--后台管理-->
<div class="f-column" style="height:100vh;">
  <!-------------------------header------------------------->
  <div class="main-header f-row" style="height:8vh;min-height:40px;">
    <div class="f-row f-full">
      <div class="main-title f-animate f-row f-content-center" [style.width.px]="width">
        <img class="app-logo" src="../../../assets/img/logo.png">
        <span *ngIf="!collapsed"><strong>GDD宠物馆</strong></span>
      </div>
      <div class="main-bar f-full">
        <span class="main-toggle fa fa-bars" (click)="toggle()"></span>
        <div style="padding-right: 4px;">
          <button type="button" class="btn btn-outline-light btn-sm" (click)="onLogout()">退出</button>
        </div>
      </div>
    </div>
  </div>
  <!-------------------------body------------------------->
  <div class="f-row f-full" style="height: 92vh;">
    <!--菜单栏-->
    <div class="sidebar-body f-animate" [style.width.px]="width"
         style="height: 92vh;overflow-y: auto;overflow-x: hidden;">
      <!--菜单栏头像-->
      <div *ngIf="!collapsed" class="sidebar-user row">
        <div class="col-5">
          <img src="{{user.cover}}"
               style="width:80px;height:80px;border:4px double rgba(0,0,0,0.2);border-radius:50%;">
        </div>
        <div class="col-7" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <span>{{user.name}}</span>
        </div>
      </div>
      <!--菜单栏分类-->
      <eui-sidemenu [data]="menus" [border]="false" [collapsed]="collapsed" [multiple]="true" [(selection)]="selectMenu"
                    (itemClick)="onItemClick($event)" (selectionChange)="onSelectionChange($event)"></eui-sidemenu>
    </div>
    <!--菜单栏分类内容-->
    <div class="main-body f-full">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

<!--全局消息提示弹框-->
<eui-messager [showHeader]="false" borderType="none">
  <ng-template euiBodyTemplate let-messager>
    <div class="m-content">
      <h2>{{messager.title}}</h2>
      <p>{{messager.msg}}</p>
      <div class="m-buttons">
        <eui-linkbutton *ngFor="let button of messager.buttons;let i = index;" [text]="button.text"
                        (click)="messager.closeDialog(button)">{{i==0?messager.ok:messager.cancel}}
        </eui-linkbutton>
      </div>
    </div>
  </ng-template>
</eui-messager>

<!--全局进度条弹框-->
<eui-dialog [closed]="progressValue==0" [closable]="true" [modal]="true" [panelStyle]="{width:'400px'}" borderType="none">
    <eui-progressbar [value]="progressValue" [showValue]="true" barCls="c1" *ngIf="progressValue!=0"></eui-progressbar>
</eui-dialog>

<!--全局删除提示弹框-->
<eui-dialog [closed]="deleteDlgClosed" [closable]="true" [modal]="true" (close)="onDlgClose()" borderType="none"
            panelCls="deleteDlg" headerCls="deleteDlg-header" bodyCls="deleteDlg-body" footerCls="deleteDlg-footer">
  <eui-panel-header>{{deleteDlgTitle}}</eui-panel-header>
  <div>{{msg}}</div>
  <eui-panel-footer>
    <eui-button-group style="width:100%;height:50px">
      <eui-linkbutton class="f-full" [plain]="true" btnCls="deleteDlgBtn" [disabled]="deleteDlgBtnDisabled"
                      (click)="onDeleteSure()">确定
      </eui-linkbutton>
      <eui-linkbutton class="f-full" [plain]="true" btnCls="deleteDlgBtn" [disabled]="deleteDlgBtnDisabled"
                      (click)="onDeleteCancel()">取消
      </eui-linkbutton>
    </eui-button-group>
  </eui-panel-footer>
</eui-dialog>

